<template>
  <article class="resize-wrap" :style="compStyle" @mousedown="handleMousedown">
    <div class="resize vertical up"></div>
    <div class="resize horizontal right"></div>
    <div class="resize vertical down"></div>
    <div class="resize horizontal left"></div>
  </article>
</template>

<script>
export default {
  name: "ResizeController",
  data() {
    return {
      direction: "",
      startX: "",
      startY: "",
      originalLeft: "",
      originalTop: "",
      originalWidth: "",
      originalHeight: ""
    };
  },
  computed: {
    curStyle() {
      return this.$store.getters.curStyle;
    },
    compStyle() {
      if (Object.keys(this.curStyle).length) {
        return `left:${this.curStyle.left}px;top:${this.curStyle.top}px;width:${this.curStyle.width}px;height:${this.curStyle.height}px;minWidth:${this.curStyle.minWidth}px;minHeight:${this.curStyle.minHeight}px`;
      }
      return "";
    }
  },
  methods: {
    handleMousedown() {
      let classList = event.target.className.split(" "),
        currentDom = document.getElementById(this.$store.state.currentID);
      this.startX = event.x;
      this.startY = event.y;
      this.originalLeft = +currentDom.style.left.split("px")[0];
      this.originalTop = +currentDom.style.top.split("px")[0];
      this.originalWidth = +currentDom.style.width.split("px")[0];
      this.originalHeight = +currentDom.style.height.split("px")[0];

      this.$store.commit("changeSelectFlag", true); //拖动时禁止选择内容

      if (classList.includes("resize-wrap")) {
        this.direction = "";
      } else if (classList.includes("up")) {
        this.direction = "up";
      } else if (classList.includes("right")) {
        this.direction = "right";
      } else if (classList.includes("down")) {
        this.direction = "down";
      } else if (classList.includes("left")) {
        this.direction = "left";
      }

      document.onmousemove = this.moveResize;

      document.onmouseup = () => {
        this.$store.commit("changeSelectFlag", false);
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    moveResize() {
      let view = document.getElementsByClassName("view-wrap")[0],
        viewWidth = +view.getBoundingClientRect().width,
        viewHeight = +view.getBoundingClientRect().height,
        comp = document.getElementById(this.$store.state.currentID),
        compWidth = +comp.getBoundingClientRect().width,
        compHeight = +comp.getBoundingClientRect().height,
        dx = Math.round(event.x - this.startX),
        dy = Math.round(event.y - this.startY),
        commitObj,
        curLeft = Math.max(this.originalLeft + dx, 0), //计算当前组件left最小值 -- 拖动时限制组件的拖动范围
        curTop = Math.max(this.originalTop + dy, 0); //计算当前组件top最小值 -- 拖动时限制组件的拖动范围

      curLeft = Math.min(curLeft + compWidth, viewWidth) - compWidth; //计算当前组件left最大值 -- 拖动时限制组件的拖动范围
      curTop = Math.min(curTop + compHeight, viewHeight) - compHeight; //计算当前组件left最大值 -- 拖动时限制组件的拖动范围

      if (this.direction === "up") {
        commitObj = {
          top: Math.max(curTop, 0),
          height: Math.min(this.originalHeight - dy, viewHeight)
        };
      } else if (this.direction === "right") {
        commitObj = {
          width: Math.min(
            this.originalWidth + dx,
            viewWidth - this.originalLeft
          )
        };
      } else if (this.direction === "down") {
        commitObj = {
          height: Math.min(
            this.originalHeight + dy,
            viewHeight - this.originalTop
          )
        };
      } else if (this.direction === "left") {
        commitObj = {
          left: Math.max(curLeft, 0),
          width: Math.min(this.originalWidth - dx, viewWidth)
        };
      } else {
        commitObj = {
          left: curLeft,
          top: curTop
        };
      }

      this.$store.commit("changeStyle", commitObj);
    }
  }
};
</script>

<style lang="stylus" scoped>
.resize-wrap
  z-index 10
  cursor move
  position absolute
  outline 1px solid #2196f3
.resize
  position absolute
  width 10px
  height 10px
  border 1px solid #2196f3
  background-color #fff
  z-index 10000
  &.vertical
    cursor s-resize
  &.horizontal
    cursor w-resize
.up
  top -5px
  left calc(50% - 5px)
.right
  right -5px
  top calc(50% - 5px)
.down
  bottom -5px
  left calc(50% - 5px)
.left
  left -5px
  top calc(50% - 5px)
</style>
